<template>
	<view class="remark">
		<view class="remark-a">
			<view class="remark-title flexCss-a">
				<view class="flexCss-b">
					<text>综合评分</text>
					<uni-rate size="16" allow-half :readonly="true" :value="zhpj" />
				</view>
				<view class="right">{{ goodPl }}%好评</view>
			</view>

			<view class="category flexCss-b">
				<view :class="show === 1 ? 'active' : ''" class="category-item " @click="getTagList(1)">全部评论</view>
				<view :class="show === 2 ? 'active' : ''" class="category-item" @click="getTagList(2)">有图</view>
			</view>
		</view>

		<view class="remark-list">
			<view class="remark-item" v-for="item in tagList" :key="item.id">
				<view class="comment-img">
					<view class="img"><image :src="item.img" mode=""></image></view>
					<view class="info">
						<view class="user">
							<view class="name">{{ item.sf }}</view>
							<view class="star"><uni-rate size="16" :readonly="true" :value="item.pf" /></view>
						</view>
						<view class="evaluate">{{ item.time }}</view>
					</view>
				</view>
				<view class="tagList .flexCss-b">
					<view class="tagList-list" v-for="item in item.lb" :key="item">{{ item }}</view>
				</view>
				<view class="comment-desc">
					<view class="desc-top">{{ item.value }}</view>
					<view class="desc-button" v-if="!item.imgs[0] == ''"><image v-for="(img, i) in item.imgs" :key="i" :src="img" mode=""></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { reqGetComment } from '@/api/modules/comment .js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	tagList: [],
	id: '',
	goodPl: '',
	show: 1,
	zhpj: 0,
	page: 1,
	pageSize: 10
})

// 获取评论列表
const getTagList = async (item = 1) => {
	state.show = item
	const { data } = await reqGetComment(state.id, state.page)
	state.pl = data.data.total
	const list = []
	const arr = []
	data.data.list.forEach(item => {
		item.time = item.time.split('T')[0]
		if (item.pf >= 4) {
			arr.push(item.pf)
		}
	})
	state.tagList = [...state.tagList, ...data.data.list]
	console.log(state.tagList)
}

// 下拉
onPullDownRefresh(() => {
	state.page = 1
	state.tagList = []
	getTagList()
})

// 上拉
onReachBottom(() => {
	state.page++
	getTagList()
})

// 页面加载
onLoad(message => {
	state.id = message.id
	getTagList()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { tagList, goodPl, show, zhpj } = toRefs(state)
</script>

<style lang="scss">
page {
	padding: 0;
	background-color: #f5f5f5;
}
.remark-a {
	padding: 20rpx;
	background-color: #fff;
	.remark-title {
		.right {
			font-size: 24rpx;
			color: #888b99;
		}
	}
	.category {
		margin-top: 30rpx;
		.category-item {
			font-size: 26rpx;
			padding: 10rpx 25rpx;
			background-color: #f2f2f2;
			border-radius: 30rpx;
			margin-right: 20rpx;
			outline: none;
			line-height: 30rpx;
			border: 1rpx solid #fff;
		}
		.active {
			border: 1px solid #f33e3e;
			color: #f33e3e;
			background: rgba(243, 63, 62, 0.1);
		}
	}
}

.remark-list {
	margin-top: 30rpx;
	.remark-item {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
	}
}

.comment-img {
	display: flex;
	.img {
		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}
	.info {
		margin-left: 30rpx;
		.user {
			display: flex;
		}
		.name {
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		.star {
			margin-top: 8rpx;
		}
		.evaluate {
			display: flex;
			margin-top: 10rpx;
			color: #888b99;
			font-size: 24rpx;
		}
	}
}

.tagList {
	.tagList-list {
		margin-right: 10rpx;
		margin-top: 10rpx;
		border: 1px solid #b9bec3;
		padding: 5rpx 12rpx;
		line-height: 30rpx;
		color: #888b99;
		font-size: 24rpx;
	}
}

.comment-desc {
	.desc-top {
		font-size: 28rpx;
		// height: 130rpx;
		padding: 30rpx 0 30rpx 0;
	}
	.desc-button {
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 6rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
